<template>
  <view class="payment-detail-page">
    <!-- 支付状态 -->
    <view class="status-card">
      <u-card :border="false">
        <view class="status-info">
          <view class="status-icon">
            <u-icon 
              :name="statusIcon" 
              :color="statusColor" 
              size="60"
            ></u-icon>
          </view>
          <view class="status-text">
            <text class="status-title">{{ statusTitle }}</text>
            <text class="status-desc">{{ statusDesc }}</text>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 支付信息 -->
    <view class="info-card">
      <u-card title="支付信息" :border="false">
        <view class="info-item">
          <text class="info-label">订单号：</text>
          <text class="info-value">{{ paymentDetail.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">支付金额：</text>
          <text class="info-amount">¥{{ paymentDetail.amount }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">支付方式：</text>
          <text class="info-value">{{ paymentDetail.paymentMethodName }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">支付时间：</text>
          <text class="info-value">{{ paymentDetail.paymentTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">交易流水号：</text>
          <text class="info-value">{{ paymentDetail.transactionNo || '--' }}</text>
        </view>
      </u-card>
    </view>

    <!-- 费用信息 -->
    <view class="fee-card">
      <u-card title="费用信息" :border="false">
        <view class="info-item">
          <text class="info-label">费用类型：</text>
          <text class="info-value">{{ paymentDetail.feeTypeName }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">房号：</text>
          <text class="info-value">{{ paymentDetail.roomNumber }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">计费周期：</text>
          <text class="info-value">{{ paymentDetail.billingPeriod }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">应缴金额：</text>
          <text class="info-value">¥{{ paymentDetail.originalAmount }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">优惠金额：</text>
          <text class="info-discount">-¥{{ paymentDetail.discountAmount || '0.00' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">实付金额：</text>
          <text class="info-amount">¥{{ paymentDetail.amount }}</text>
        </view>
      </u-card>
    </view>

    <!-- 操作记录 -->
    <view v-if="paymentDetail.operationLogs && paymentDetail.operationLogs.length > 0" class="log-card">
      <u-card title="操作记录" :border="false">
        <view class="log-list">
          <view 
            v-for="(log, index) in paymentDetail.operationLogs" 
            :key="index"
            class="log-item"
          >
            <view class="log-time">{{ log.operationTime }}</view>
            <view class="log-content">{{ log.operationDesc }}</view>
            <view class="log-operator">{{ log.operatorName }}</view>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <u-button 
        v-if="paymentDetail.status === 'success'"
        type="primary" 
        text="查看发票"
        @click="viewInvoice"
        size="large"
      ></u-button>
      <u-button 
        v-if="paymentDetail.status === 'failed'"
        type="warning" 
        text="重新支付"
        @click="retryPayment"
        size="large"
      ></u-button>
      <u-button 
        type="default" 
        text="返回列表"
        @click="goBack"
        size="large"
      ></u-button>
    </view>
  </view>
</template>

<script setup>
/**
 * 支付详情页面
 * @author Wu.Liang
 * @date 2025-01-27
 * @version 2.0 - 统一支付接口集成
 */

import { ref, reactive, computed, onMounted } from 'vue'
import { unifiedPaymentApi } from '@/api/payment'

// 支付详情
const paymentDetail = reactive({
  id: '',
  orderNo: '',
  amount: '0.00',
  originalAmount: '0.00',
  discountAmount: '0.00',
  status: 'success',
  paymentMethodName: '',
  paymentTime: '',
  transactionNo: '',
  feeTypeName: '',
  roomNumber: '',
  billingPeriod: '',
  operationLogs: []
})

// 计算状态显示
const statusIcon = computed(() => {
  const iconMap = {
    '0': 'clock',
    '1': 'clock',
    '2': 'checkmark-circle',
    '3': 'close-circle',
    '4': 'refresh',
    'success': 'checkmark-circle',
    'failed': 'close-circle',
    'processing': 'clock',
    'cancelled': 'close'
  }
  return iconMap[paymentDetail.paymentStatus] || 'help-circle'
})

const statusColor = computed(() => {
  const colorMap = {
    '0': '#1890ff',
    '1': '#fa8c16',
    '2': '#2ed573',
    '3': '#ff4757',
    '4': '#747d8c',
    'success': '#2ed573',
    'failed': '#ff4757',
    'processing': '#ffa502',
    'cancelled': '#747d8c'
  }
  return colorMap[paymentDetail.paymentStatus] || '#747d8c'
})

const statusTitle = computed(() => {
  const titleMap = {
    '0': '待支付',
    '1': '支付中',
    '2': '支付成功',
    '3': '支付失败',
    '4': '已退款',
    'success': '支付成功',
    'failed': '支付失败',
    'processing': '支付处理中',
    'cancelled': '支付已取消'
  }
  return titleMap[paymentDetail.paymentStatus] || '未知状态'
})

const statusDesc = computed(() => {
  const descMap = {
    '0': '订单已创建，请尽快完成支付。',
    '1': '正在处理您的支付请求，请稍候...',
    '2': '您的费用已成功缴纳，感谢您的配合！',
    '3': '支付过程中遇到问题，请重新尝试或联系客服。',
    '4': '支付已退款，退款金额将原路返回。',
    'success': '您的费用已成功缴纳，感谢您的配合！',
    'failed': '支付过程中遇到问题，请重新尝试或联系客服。',
    'processing': '正在处理您的支付请求，请稍候...',
    'cancelled': '支付已被取消，如需重新支付请点击下方按钮。'
  }
  return descMap[paymentDetail.paymentStatus] || '请稍候...'
})

// 加载支付详情
const loadPaymentDetail = async () => {
  try {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options
    
    if (!options.id) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      return
    }
    
    const response = await paymentApi.getPaymentDetail(options.id)
    
    if (response.code === 200) {
      const data = response.data
      
      // 更新支付详情数据
      Object.assign(paymentDetail, {
        id: data.id,
        orderNo: data.orderNo,
        amount: data.amount,
        originalAmount: data.amount, // 简化处理，实际应从费用详情获取
        discountAmount: '0.00', // 简化处理
        paymentStatus: data.paymentStatus,
        paymentMethodName: data.paymentMethodName,
        paymentTime: data.paymentTime,
        thirdPartyOrderNo: data.thirdPartyOrderNo,
        businessTypeName: data.businessTypeName,
        roomNumber: data.roomNumber || '--',
        billingPeriod: data.billingPeriod || '--',
        operationLogs: data.operationLogs || []
      })
    } else {
      throw new Error(response.message || '获取支付详情失败')
    }
  } catch (error) {
    console.error('获取支付详情失败', error)
    uni.showToast({
      title: error.message || '获取详情失败',
      icon: 'none'
    })
  }
}

// 查看发票
const viewInvoice = () => {
  uni.navigateTo({
    url: `/pages/payment/invoice?orderNo=${paymentDetail.orderNo}`
  })
}

// 重新支付
const retryPayment = () => {
  uni.navigateTo({
    url: `/pages/payment/payment?feeId=${paymentDetail.businessOrderId}&amount=${paymentDetail.amount}&feeType=${paymentDetail.businessType}&roomNumber=${paymentDetail.roomNumber}`
  })
}

// 返回列表
const goBack = () => {
  uni.navigateBack()
}

// 页面加载时初始化数据
onMounted(() => {
  loadPaymentDetail()
})
</script>

<style lang="scss" scoped>
.payment-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
}

.status-card {
  margin-bottom: 20px;
  
  .status-info {
    display: flex;
    align-items: center;
    padding: 20px 0;
    
    .status-icon {
      margin-right: 20px;
    }
    
    .status-text {
      flex: 1;
      
      .status-title {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
      }
      
      .status-desc {
        display: block;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

.info-card,
.fee-card,
.log-card {
  margin-bottom: 20px;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      font-size: 14px;
      color: #666;
    }
    
    .info-value {
      font-size: 14px;
      color: #333;
    }
    
    .info-amount {
      font-size: 16px;
      font-weight: bold;
      color: #ff4757;
    }
    
    .info-discount {
      font-size: 14px;
      color: #2ed573;
    }
  }
}

.log-card {
  .log-list {
    .log-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding: 12px;
      background-color: #f8f9fa;
      border-radius: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .log-time {
        font-size: 12px;
        color: #999;
        margin-right: 12px;
        min-width: 80px;
      }
      
      .log-content {
        flex: 1;
        font-size: 14px;
        color: #333;
        margin-right: 12px;
      }
      
      .log-operator {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
</style> 